<template>
  <div class="defaltTable">
    <Table
      ref="tableRef"
      v-bind="$attrs"
      :border="true"
      :row-key="'id'"
      :columns="column"
      :request-api="getTableList"
    >
      <!-- @selection-change="selectionChange"
      :requestApi="getTableList" -->
      <template #usernameHeader>
        <button>用户名</button>
      </template>
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" @click="onAdd"> 新增用户 </el-button>
        <el-button type="danger" plain :disabled="!scope.isSelected">
          批量删除用户
        </el-button>
      </template>

      <!-- 表格操作 -->
      <template #operation="{ row }">
        <el-button type="primary" link @click="onEdit(row)"> 编辑 </el-button>
        <el-button type="primary" link @click="onDelete(row)"> 删除 </el-button>
      </template>
    </Table>

    <Alert v-bind="alertProps" @on-cancel="onCancel" @on-success="onSuccess" />
  </div>
</template>

<script setup lang="ts">
import { h } from "vue";
// import Table from "./components/Table.vue";
import Table from "@/components/TablePro/index.vue";
import type { TableType } from "./interface";
import Alert from "@/components/Alert/index.vue";
import { AlertType } from "@/components/Alert/interface/";
import { useHandleData } from "@/hooks/useHandleData";

const react = ref<any>({});
const column: ColumnsProps[] = [
  {
    tableItem: {
      type: "selection",
    },
  },
  {
    tableItem: {
      type: "index",
    },
  },
  {
    prop: "username",
    label: "姓名",
    tableItem: {},
    searchItem: {},
    formItem: {},
  },
  {
    prop: "user.detail.age",
    label: "年龄",
    tableItem: {},
  },
  {
    prop: "gender",
    label: "性别",
    tableItem: {},
  },
  {
    prop: "operation",
    label: "操作",

    tableItem: {
      render(v: any) {
        return h("button", null, "h函数-修改");
      },
      headerRender(v: any) {
        return h("div", null, "h函数-操作");
      },
    },
  },
];

const alertProps: AlertType.Props = reactive({
  title: "添加",
  show: false,
  type: "form",
  form: {
    columns: column,
    data: react,
  },
});

const onAdd = () => {
  alertProps.show = true;
  alertProps.title = "添加";
};

const onEdit = (v: any) => {
  // console.log(103, v);
  react.value = v;
  alertProps.show = true;
  alertProps.title = "修改";
};

const onDelete = async (v: any) => {
  useHandleData(getTableList, { username: v.username }, "删除该项");
};

const onCancel = () => {
  alertProps.show = false;
  react.value = null;
};

const onSuccess = (v: any) => {
  console.log("确定", v);
  onCancel();
};

const getTableList = (params: any): any => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return userApi.getUestList(newParams);
};
</script>

<style scoped>
.defaltTable {
  height: 100%;
}
</style>
